<template>
    <div style="padding: 12px 0px; width: 100%; height: 100%">
        <div style="width: 100%; height: 100%; position: relative" v-if="detail.dataSource === '外部'">
            <a-row>
                <a-col :span="12">
                    <flexbox justify="center" style="box-sizing: border-box">
                        <flexbox direction="column" style="min-width: 120px">
                            <div style="font-size: 14px; color: #999999; margin: 0 0 12px 0">
                                <span>业务需求</span>
                                <a-tag
                                    :color="info[0].addCount - info[0].lastAddCount > 0 ? 'red' : 'green'"
                                    v-if="
                                        (info[0].addCount || info[0].addCount === 0) &&
                                        info[0].lastAddCount &&
                                        info[0].addCount != info[0].lastAddCount
                                    "
                                    style="margin-left: 4px; border-radius: 10px"
                                >
                                    {{ info[0].addCount - info[0].lastAddCount > 0 ? '+' : '-' }}
                                    {{
                                        info[0].lastAddCount
                                            ? (Math.abs(info[0].addCount - info[0].lastAddCount) / info[0].lastAddCount).toFixed(2)
                                            : ''
                                    }}
                                </a-tag>
                            </div>
                            <flexbox direction="column" justify="center" align="center" style="height: 44px">
                                <span
                                    class="font-w-b"
                                    style="font-size: 28px; margin-bottom: 12px"
                                    v-if="info[0].addCount || info[0].addCount === 0"
                                    >{{ info[0].addCount }}</span
                                >
                                <a-tag color="red" v-else>未填报</a-tag>
                            </flexbox>
                        </flexbox>
                    </flexbox>
                </a-col>
                <a-col :span="12">
                    <flexbox justify="center" style="box-sizing: border-box">
                        <flexbox direction="column" style="min-width: 120px">
                            <div style="font-size: 14px; color: #999999; margin: 0 0 12px 0">
                                <span>产品需求</span>
                                <a-tag
                                    :color="info[1].addCount - info[1].lastAddCount > 0 ? 'red' : 'green'"
                                    v-if="
                                        (info[1].addCount || info[1].addCount === 0) &&
                                        info[1].lastAddCount &&
                                        info[1].addCount != info[1].lastAddCount
                                    "
                                    style="margin-left: 4px; border-radius: 10px"
                                >
                                    {{ info[1].addCount - info[1].lastAddCount > 0 ? '+' : '-' }}
                                    {{
                                        info[1].lastAddCount
                                            ? (Math.abs(info[1].addCount - info[1].lastAddCount) / info[1].lastAddCount).toFixed(2)
                                            : ''
                                    }}
                                </a-tag>
                            </div>
                            <flexbox direction="column" justify="center" align="center" style="height: 44px">
                                <span
                                    class="font-w-b"
                                    style="font-size: 28px; margin-bottom: 12px"
                                    v-if="info[1].addCount || info[1].addCount === 0"
                                    >{{ info[1].addCount }}</span
                                >
                                <a-tag color="red" v-else>未填报</a-tag>
                            </flexbox>
                        </flexbox>
                    </flexbox>
                </a-col>
            </a-row>
            <flexbox justify="space-between" style="margin-top: 12px">
                <a-tag style="border: 1px solid #97d1ff; background: rgba(4, 120, 211, 0.12); color: #666666">
                    进行中版本：<span>{{ detail.processVersion.length }}</span>
                </a-tag>
                <a-tag color="orange">
                    已发布版本：<span>{{ detail.releaseVersion.length }}</span>
                </a-tag>
                <a-tag style="border: 1px solid #ffe58f; background: #fffbe6; color: #666666">
                    进行中逾期：<span>{{ detail.processOverDueVersion.length }}</span>
                </a-tag>
            </flexbox>
        </div>
        <!-- 内部 -->
        <div style="width: 100%; height: 100%; position: relative" v-else>
            <a-row>
                <a-col :span="12">
                    <flexbox justify="center" style="box-sizing: border-box">
                        <flexbox direction="column" style="min-width: 120px">
                            <div style="font-size: 14px; color: #999999; margin: 0 0 12px 0">
                                <span> 业务需求 </span>
                                <a-tag
                                    :color="info[0].addCount - info[0].lastAddCount > 0 ? 'red' : 'green'"
                                    v-if="info[0].lastAddCount && info[0].addCount != info[0].lastAddCount"
                                    style="margin-left: 4px; border-radius: 10px"
                                >
                                    {{ info[0].addCount - info[0].lastAddCount > 0 ? '+' : '-' }}
                                    {{
                                        info[0].lastAddCount
                                            ? (Math.abs(info[0].addCount - info[0].lastAddCount) / info[0].lastAddCount).toFixed(2)
                                            : ''
                                    }}
                                </a-tag>
                            </div>
                            <flexbox>
                                <flexbox direction="column" justify="center" align="center">
                                    <div class="font-w-b" style="font-size: 28px; margin-bottom: 12px">{{ info[0].addCount }}</div>
                                </flexbox>
                            </flexbox>
                        </flexbox>
                    </flexbox>
                </a-col>
                <a-col :span="12">
                    <flexbox justify="center" style="box-sizing: border-box">
                        <flexbox direction="column" style="min-width: 120px">
                            <div style="font-size: 14px; color: #999999; margin: 0 0 12px 0">
                                <span>产品需求</span>
                                <a-tag
                                    :color="info[1].addCount - info[1].lastAddCount > 0 ? 'red' : 'green'"
                                    v-if="info[1].lastAddCount && info[1].addCount != info[1].lastAddCount"
                                    style="margin-left: 4px; border-radius: 10px"
                                >
                                    {{ info[1].addCount - info[1].lastAddCount > 0 ? '+' : '-' }}
                                    {{
                                        info[1].lastAddCount
                                            ? (Math.abs(info[1].addCount - info[1].lastAddCount) / info[1].lastAddCount).toFixed(2)
                                            : ''
                                    }}
                                </a-tag>
                            </div>
                            <flexbox>
                                <flexbox direction="column" justify="center">
                                    <span class="font-w-b" style="font-size: 28px; margin-bottom: 12px">{{ info[1].addCount }}</span>
                                </flexbox>
                            </flexbox>
                        </flexbox>
                    </flexbox>
                </a-col>
            </a-row>

            <flexbox justify="space-between">
                <a-tag style="border: 1px solid #97d1ff; background: rgba(4, 120, 211, 0.12); color: #666666">
                    进行中版本：<span>{{ detail.processVersion.length }}</span>
                </a-tag>
                <a-tag style="border: 1px solid #b7eb8f; background: #f6ffed; color: #666666">
                    已发布版本：<span>{{ detail.releaseVersion.length }}</span>
                </a-tag>
                <a-tag style="border: 1px solid #ffe58f; background: #fffbe6; color: #666666">
                    进行中逾期：<span>{{ detail.processOverDueVersion.length }}</span>
                </a-tag>
            </flexbox>
        </div>
    </div>
</template>

<script lang="ts">
import store from '@/store';
import api from '@/api';
import { defineComponent, ref, unref, reactive, toRefs, watch } from 'vue';
export default defineComponent({
    props: {
        info: {
            type: Object,
            default: () => ({})
        },
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const state = reactive<any>({
            taskOption: null,
            proOption: null,
            defaultProOption: { seriesName: '产品需求数量', title: '产品需求总数', numTotal: 0 }
        });
        // 获取产品需求
        const getTaskList = async () => {
            const query = {
                ids: props.info[0].addIds
            };
            const { success, moule } = await api.pmpRequestInfoModel.findByIds(query);
            if (success) {
                const { typeArr, dataArr } = getPieChartData(moule, 'requestType');
                state.taskOption = {
                    typeArr,
                    dataArr,
                    seriesName: '业务需求数量',
                    title: '业务需求总数',
                    numTotal: moule.length
                };
            }
        };
        // 获取产品需求
        const getProList = async () => {
            const query = {
                ids: props.info[1].addIds
            };
            const { success, moule } = await api.productRequireModel.findProductsByIds(query);
            if (success) {
                const { typeArr, dataArr } = getPieChartData(moule, 'requireType');
                state.proOption = {
                    typeArr,
                    dataArr,
                    seriesName: '产品需求数量',
                    title: '产品需求总数',
                    numTotal: moule.length
                };
            }
        };
        // 转化成图表数据
        const getPieChartData = (list, field) => {
            const typeArr: any = [];
            const dataArr: any = [];
            const group = {};
            list.forEach((item) => {
                group[item[field]] = group[item[field]] || { value: 0 };
                group[item[field]].value++;
            });
            store.getters.dicOptions[field].forEach((item) => {
                if (group[item.code] && group[item.code].value) {
                    typeArr.push(item.dimensionName);
                    dataArr.push({
                        value: group[item.code].value,
                        name: item.dimensionName
                    });
                }
            });
            return {
                dataArr,
                typeArr
            };
        };

        watch(
            () => props.info,
            (n) => {
                if (props.info[0].addIds) {
                    getTaskList();
                } else {
                    state.taskOption = null;
                }
                if (props.info[1].addIds) {
                    getProList();
                } else {
                    state.proOption = null;
                }
            },
            { deep: true, immediate: true }
        );
        return {
            ...toRefs(state)
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-tag) {
    margin-right: 0 !important;
}
</style>